<template>
  <view class="big" :style="{height: height}">
  <view class="big_box">
    <view class="out" v-for="(meal,index) in newMealInfo" :key="meal.id">
      <view class="left">
        <view class="pagack">{{meal.name}}</view>
        <view class="num">合同数量：{{meal.copies}}份</view>
      </view>
      <view class="money" @click="goods(meal.price)">
        <text class="money_Q">￥{{meal.price}}购买</text>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex"
  export default {
    data() {
      return {

      }
    },
    onLoad() {
      this.getMealInfo()
    },
    methods: {
      goods(){
        uni.login({ 
        	"provider": "weixin",
        	"onlyAuthorize": true, // 微信登录仅请求授权认证
        	success: function(event){
        		console.log(event)
        		
        	},
        	fail: function (err) {
                // 登录授权失败  
                // err.code是错误码
            }
        })

      },
      getMealInfo(){
        this.$store.dispatch('my/getMealInfo')
      }
    },
    computed: {
      ...mapState({
        newMealInfo: state => state.my.mealInfo,
      }),
      height(){
        let H=0
        if(!this.newMealInfo) return
        H=this.newMealInfo.length*230
        return H+'rpx'
      }
    }
  }
</script>

<style>
  .big_box{
    position:absolute;
    top: 61rpx;
    left: 46rpx;
  }
  .big{
    background-color: rgba(242,242,242,1.000000);
    width: 100%;
    
  }
  .left{
    margin: 5rpx 0 0 60rpx;
  }
  .pagack{
    font-size: 30rpx;
  }
  .num{
    font-size: 30rpx;
  }
  .out {
    background-color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 30rpx;
    /* margin: 40rpx auto; */
    
    margin-bottom: 42rpx;
    
    width: 662rpx;
    height: 165rpx;
  }
  .money{
    margin-right: 49rpx;
    
  }

  .money{
    width: 200rpx;
    height: 51rpx;
    color: #F7563C;
    border-radius: 28.5rpx;
    border: 1px solid #F7563C;
    background-color: #ffffff;
    padding-top: 15rpx;
    
    
  }
  .money_Q{
    font-size: 30rpx;
    /* margin-left: 32rpx; */
    display: flex;
    justify-content: center;
    text-overflow: ellipsis;
  }
</style>
